<template>
  <div class="index-container">
    <el-row>
      <!-- 左侧 -->
      <el-col :span="8" :offset="0">
        <div class="content left-top">
          <div class="title-left">消息提醒</div>
          <div class="content_eg">
            <p
              style="cursor: pointer;text-indent: 2em;margin-top: 10px;"
              @click="jumpPage"
            >{{ this.tipsMessage }}</p>
          </div>
        </div>
        <!-- 公告 -->
        <div class="content left-top">
          <div class="title-left">系统公告</div>
          <div class="content__notice"></div>
        </div>
        <div class="content" :style="{height:offsetHeight-410-45+'px'}">
          <div class="title-left">说明文档</div>
          <ol>
            <li class="content_eg">
              <a href="/static/doc/集中运维说明文档.docx">集中运维说明文档</a>
            </li>
            <!--            <li class="content_eg"> <a href="/static/doc/拦标价审核说明.docx">拦标价审核说明</a></li>-->
          </ol>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="16" :offset="0">
        <div>
          <el-row>
            <el-col :span="8" :offset="0">
              <div class="content icon">
                <div class="icon__left">
                  <img src="@/assets/images/icon/project_2.png" class="img" />
                  <div class="icon__right">
                    <div class="icon_title">未上报项目</div>
                    <div class="icon_content">
                      {{iconData.project_0}}
                      <span class="span">个</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8" :offset="0">
              <div class="content icon">
                <div class="icon__left">
                  <img src="@/assets/images/icon/project_1.png" class="img" />
                  <div class="icon__right">
                    <div class="icon_title">已申报项目</div>
                    <div class="icon_content">
                      {{iconData.project_1}}
                      <span class="span">个</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8" :offset="0">
              <div class="content icon">
                <div class="icon__left">
                  <img src="@/assets/images/icon/money_1.png" class="img" />
                  <div class="icon__right">
                    <div class="icon_title">总申报金额</div>
                    <div class="icon_content">
                      {{iconData.apply_amount}}
                      <span class="span">万元</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="content" :style="{height:offsetHeight-100-45+'px'}">
          <div class="title-left">微信绑定</div>
          <el-button type="primary" size="medium" @click="addWx" class="mt5">添加微信账号</el-button>
          <div class="mt5">
            <el-table
              :data="wsData.results"
              border
              stripe
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              :height="offsetHeight-200-65+'px'"
              v-loading="loading"
            >
              <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
              <el-table-column prop="nick_name" label="微信昵称" width="180" align="center"></el-table-column>
              <el-table-column prop="create_date" label="创建时间" width="180" align="center"></el-table-column>
              <el-table-column prop="status" label="绑定状态" width="100" align="center">
                <template v-slot="{ row }">
                  <span v-if="row.status == 0">未审核</span>
                  <span v-if="row.status == 1">审核通过</span>
                  <span v-if="row.status == 2">审核未通过</span>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="操作" align="center">
                <template v-slot="{ row }">
                  <template v-if="row.status === '0'">
                    <el-Button
                      type="success"
                      size="small"
                      class="actionBtn"
                      @click="passAction(row.id)"
                    >过审</el-Button>
                    <el-Button
                      type="danger"
                      size="small"
                      class="actionBtn"
                      @click="noPassAction(row.id)"
                    >不予通过</el-Button>
                  </template>
                  <el-Button
                    type="danger"
                    size="small"
                    class="actionBtn"
                    @click="delAction(row.id)"
                  >删除</el-Button>
                </template>
              </el-table-column>
            </el-table>
            <div class="page">
              <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNoChange"
                :page-sizes="[10, 50, 100, 200]"
                :page-size="10"
                background
                layout="total, sizes, prev, pager, next"
                :total="wsData.totalRecord"
              ></el-pagination>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="微信绑定" :visible.sync="wxShow" width="30%" @close="wxCancel">
      <div class="qrCode" id="qrCode" ref="qrCode"></div>
      <div class="qrText">请使用微信扫一扫</div>
      <span slot="footer">
        <el-button @click="wxCancel">取消</el-button>
        <el-button type="primary" @click="wxConfirm">确认</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="tipsModal"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span slot="title" style="color: red; font-size: 16px;font-weight:bold">注意提示</span>
      <div
        style="text-indent: 2em;margin-top: -10px;  line-height: 20px;"
      >1.本系统已新增需求确认环节，请各申报单位收到“需求确认书”消息提醒后，在5个工作日内将加盖主管部门公章的PDF文件回传至该系统。如未及时完成，则无法列入本年度集中运维预算中，由申报单位自行负责。</div>
      <div
        style="text-indent: 2em; margin-top: 10px;  line-height: 10px;line-height: 20px;"
      >2.各单位完成需求确认后，不予新增或调整，将以此作为采购的相关参数。</div>

      <div
        style="text-indent: 2em; margin-top: 10px;  line-height: 10px;line-height: 20px;"
      >3.对于闲置、报废、停用、损坏的硬件及软件，不应列入全市集中运维申报项目。如发现此情况，将取消本年及以后年度运维资金安排!</div>

      <span slot="footer">
        <el-button
          type="primary"
          @click="tipsCancel"
          :disabled="this.totalSeconds !== 0"
        >我知道了{{ `${this.totalSeconds === 0 ? '' : '('+this.totalSeconds+')' }` }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import QRcode from 'qrcodejs2'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'user'
    ])
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 100,
      loading: false,
      iconData: {},
      wsData: {
        totalRecord: 0
      },
      pageNo: 1,
      pageSize: 10,
      wxShow: false,
      wxCode: false,
      requirementData: {},
      totalSeconds: 10,
      tipsModal: false,
      tipsModal2: false,
      tipsMessage: ''
    }
  },
  methods: {
    jumpPage () {
      this.$router.push({ path: '/input-info/usual/requirement' })
    },
    tipsCancel2 () {
      this.tipsModal2 = false
      clearInterval(this.timer);// 满足条件时 停止计时

    },
    tipsCancel () {
      this.tipsModal = false
      clearInterval(this.timer);// 满足条件时 停止计时

    },
    async init () {
      this.loading = true
      this.iconData = await this.$http('findWholeList', {
      })

      this.wsData = await this.$http('wxPage', {
        apply_company_code: this.pageNo,
        pageSize: this.pageSize,
        del_flag: 0
      })
      this.$http('selectApplyCompanyRequirement', {
        apply_company_code: this.user.company_code
      }).then(res => {
        if (res.length > 0) {
          this.tipsMessage = '需求确认书已下发，请在5个工作日内回传。如未及时完成，则无法列入本年度集中运维预算中，由申报单位自行负责。'
        }
        this.loading = false
      })
      this.loading = false
    },
    addWx () {
      this.wxShow = true
      setTimeout(() => {
        this.qrCodeShow()
      }, 500);
    },
    qrCodeShow () {
      this.$refs.qrCode.innerHTML = ''
      new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        text: 'https://appbeta.shengshitong.com/subsidy/#/city-card-wechat-authorization??company_code=' + this.user.company_code + '&login_name=' + this.user.loginName, // 二维码内容
        // render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000000', // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
    },
    async passAction (id) {
      const res = await this.$http('wxUp', {
        id: id,
        status: 1
      })
      this.init()
    },
    async noPassAction (id) {
      const res = await this.$http('wxUp', {
        id: id,
        status: 2
      })
      this.init()
    },
    async delAction (id) {
      const res = await this.$http('wxUp', {
        id: id,
        del_flag: 1
      })
      this.init()
    },
    wxConfirm () {
      this.init()
      this.wxShow = false
    },
    wxCancel () {
      this.wxShow = false
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    },
  },
  mounted () {
    let _this = this;
    _this.timer = setInterval(function () { //定时器开始
      _this.totalSeconds--;
      if (_this.totalSeconds === 0) {
        clearInterval(_this.timer);// 满足条件时 停止计时
        // _this.sendMsg();
        // _this.tipsModal = false;
      }
    }, 1000)
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  background-color: #f1f2f6;
  height: 100%;
  width: 100%;
}
.content {
  background-color: #fff;
  margin: 5px;
  padding: 10px;

  border-radius: 5px;
  &__notice {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    margin: 0 auto;
    align-content: center;
    text-align: center;
  }
  &_eg {
    margin: 5px;
    // text-decoration: underline;
    a:hover {
      color: rgb(64, 158, 255);
    }
  }
}
.left-top {
  height: 200px;
  margin-bottom: 10px;
}

.icon {
  height: 100px;
  padding: 10px 15px;
  &__left {
    .img {
      position: absolute;
      top: 25%;
      height: 60px;
    }
  }
  &__right {
    float: right;
    .icon_title {
      text-align: center;
      font-size: 1.5rem;
    }
    .icon_content {
      font-size: 1.3em;
      text-align: right;
      margin-top: 20px;
      .span {
        font-size: 0.8em;
      }
    }
  }
}

.qrCode {
  margin: 0px auto;
  width: 200px;
  height: 200px;
}

.qrText {
  margin-top: 0.5rem;
  text-align: center;
}
</style>
